<template>
	<view class="">
		<!-- 商品详情 -->
		<view class="good-box bg_style">
			<view class="common order-mer">
				<view class="common-box content-box">
					<view class="com-name">广东恒朗</view>
					<view class="com-contact">
						<button open-type="contact" class="contact">
							<image src="../../../static/icons/jewel/order_msg.png"></image>
							联系商家
						</button>
					</view>
				</view>
			</view>
			<!--珠宝-->
			<view class="good">
				<view class="lease content-box">
					<view class="lease-img"><image :src="orderData.goods_img"></image></view>
					<view class="lease-info">
						<view class="lease-title">{{orderData.goods_name}}</view>
						<view class="lease-attr font-color-hs">{{orderData.item_names}}</view>
					</view>
					<view class="lease-price">
						<view class="lease-now">¥{{orderData.shop_price}}</view>
						<view class="lease-num font-color-hs">x{{orderData.buy_num}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cust-select-box bg_style">
			<view class="cust-key">是否已收货</view>
			<view class="cust-value-box">
				<view class="cust-value" :class="[shstate_let == 1?'cust-value-hours':'']" @tap="choose_shstate(1)">未收货</view>
				<view class="cust-value" :class="[shstate_let == 2?'cust-value-hours':'']" @tap="choose_shstate(2)">已收货</view>
			</view>
		</view>
		<view class="cust-select-box bg_style">
			<view class="cust-key">申请类型</view>
			<view class="cust-value-box">
				<view class="cust-value" :class="[apply_type == 1?'cust-value-hours':'']" @tap="choose_apply_type(1)">个人原因</view>
				<view class="cust-value" :class="[apply_type == 2?'cust-value-hours':'']" @tap="choose_apply_type(2)">商家原因</view>
				<view class="cust-value" :class="[apply_type == 3?'cust-value-hours':'']" @tap="choose_apply_type(3)">商品原因</view>
			</view>
		</view>
		<view class="cust-select-box bg_style" @tap="choose_apply_reason">
			<view class="cust-key">
				申请原因
				<view class="select_type">{{apply_reason}}</view>
			</view>
			<view class="cust-value-box cust_select_apply"><image src="../../../static/icons/jewel/op-icon.png" class="op-icon"></image></view>
		</view>
		<view class="li cust-select-box bg_style upload_img">
			<view class="cust-key">珠宝图片</view>
			<view class="images-content">
				<view class="images-list">
					<view class="add-image" @tap="chooseImage">+</view>
					<block v-for="(image,index) in imageList" :key="index">
						<view class="image-file">
							<image src="../../../static/icons/jewel/close_diy.png" @tap="delete_img(image.url, index)" class="close_diy" mode=""></image>
							<image class="image" :src="image.temp" :data-src="image.temp" @tap="previewImage"></image>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="cust-select-box bg_style placeholder">
			<view class="cust-key">问题描述</view>
			<view class="cust-value-box"><textarea :placeholder="content?content:'请填写描述'" class="cust-content"  @input='log_content' /></view>
		</view>
		
		<view class="cust-select-box bg_style back_address">
			<view class="cust-key">寄回地址和联系电话<text class="youfei">（邮费自理，谢绝到付）</text></view>
			<view class="cust-key">0757-83275833</view>
			<view class="cust-key">广东省佛山市禅城区文华北路110号首层恒朗寄存寄售行</view>
		</view>

		<view class="cust-select-box bg_style addr" @tap="edit_address">
			<view class="cust-key">
				收货人:
				<view class="select_type">{{addressData.realname}}</view>
			</view>
		</view>
		<view class="cust-select-box bg_style addr" @tap="edit_address">
			<view class="cust-key">
				电话号码:
				<view class="select_type">{{addressData.mobile}}</view>
			</view>
		</view>
		<view class="cust-select-box bg_style addr address" @tap="edit_address">
			<view class="cust-key" bindtap="edit_addr">
				<view class="addr-text">收货地址:</view>
				<view class="select_type">{{addressData.province_text+addressData.city_text+addressData.zone_text+addressData.address}}</view>
			</view>
			<view class="cust-value-box"><image src="../../../static/icons/jewel/op-icon.png" class="op-icon"></image></view>
		</view>
		<view class="warning_text">该地址是将商品回寄给您的地址</view>
		<view class="submit-box"><view class="submit" @tap="submit_apply">提交</view></view>
		
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
	</view>
</template>

<script>
	import hl from '@/common/common_zb.js';
	export default {
		data() {
			return {
				orderData: [],	// 订单数据
				order_id: 0,	// 订单id
				address_id: 0,	// 地址id
				addressData: [],	// 地址数据
				shstate_let: 0,	// 是否已收货
				apply_type: 0,	// 申请退货类型
				apply_reason: '请选择申请原因',	// 申请退货原因
				content: '',	// 申请享退问题描述
				bIsShowLoading: false,
				edit_address_url: '',	// 修改地址的url
				options_data: [],	//路由数据
				itemList: [['改变主意，不想买了', '弹错了'],['商家实际无发货', '未按约定时间发货', '商家要求加价', '临时通知无货'],['款式与描述不符','尺寸不符']],
				imageList: [],
				countPhoto: 3,
			}
		},
		onLoad(options){
			let that = this;
			that.options_data = options;
			that.order_id = options.order_id;
			if(options.shstate_let) that.shstate_let = options.shstate_let;
			if(options.content) that.content = options.content;
			if(options.apply_type) that.apply_type = options.apply_type;
			if(options.apply_reason) that.apply_reason = options.apply_reason;
			that.build_url(options);	// 创建url
			that.bIsShowLoading = true;
			new Promise((resolve, reject) => {
				hl.post('order/get_order_detail', {order_id: that.order_id}, true, function (res){
					let resdata = res.data;
					if(resdata.code == '-1') {
						hl.showToast(resdata.msg, 1000);
						setTimeout(function(){
							uni.navigateBack();
						}, 1000)
					}else{
						that.orderData = resdata.data;
						that.addressData = resdata.data.addressData;
						that.addressData.mobile = that.orderData.mobile;
						that.addressData.realname = that.orderData.realname;
						that.addressData.province = that.orderData.province;
						that.addressData.city = that.orderData.city;
						that.addressData.zone = that.orderData.zone;
						that.cardinfo = resdata.data.cardinfo;
						resolve();
					}
				})
			}).then(()=> {
				if(options.realname && options.mobile && options.address && options.province && options.city && options.zone && options.province_text && options.city_text && options.zone_text) {
					let address_data = {};
					address_data.province_text = options.province_text;
					address_data.city_text = options.city_text;
					address_data.zone_text = options.zone_text;
					address_data.realname = options.realname;
					address_data.mobile = options.mobile;
					address_data.address = options.address;
					that.addressData = address_data;
					that.build_url();	// 创建url
					that.addressData.province_text = options.province_text;
					that.addressData.city_text = options.city_text;
					that.addressData.zone_text = options.zone_text;
					that.addressData.address = options.address;
					that.addressData.mobile = options.mobile;
					that.addressData.realname = options.realname;
					
					that.addressData.province = options.province;
					that.addressData.city = options.city;
					that.addressData.zone = options.zone;
				}
				that.bIsShowLoading = false;
			})
		},
		methods: {
			delete_img: function (filePath, index){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该图片吗？',
					success: function (res) {
						if (res.confirm) {
							that.bIsShowLoading = true;
							hl.get('Upload/deleteImage', {filePath: filePath}, false, function(res){
								that.bIsShowLoading = false;
								that.imageList.splice(index,1);
							})
						}
					}
				});
			},
			chooseImage: async function() {
				let that = this;
				if (this.imageList.length === that.countPhoto) {
					let isContinue = await this.isFullImg();
					if (!isContinue) return;
				}
				uni.chooseImage({
					sourceType: ['album', 'camera'],
					sizeType: ['original', 'compressed'],
					count: that.countPhoto,
					success: (res) => {
						let filePath = res.tempFilePaths[0];
						that.bIsShowLoading = true;
						uni.uploadFile({
							url: hl.host + 'Upload/uploadCustom',
							fileType: 'image',
							filePath: filePath,
							name: 'photo',
							formData: {'app-key': hl.app_key, 'folder': 'order_refund'},
							success: (uploadFileRes) => {
								let data = uploadFileRes.data;
								data = JSON.parse(data);
								that.bIsShowLoading = false;
								if(data.code == 0) {
									that.imageList = that.imageList.concat({
										'temp': filePath,
										'url': data.data.url
									});
									
								}else{
									hl.showToast(data.msg, 1500);
								}
							}
						});
					}
				})
			},
			build_url(){
				let param = '';
				let url = '/pages/jewel/order/edit_apply_address?';
				let options = this.options_data;
				for (let i in options) {
					param+= i + '=' + options[i] + '&';
				}
				this.edit_address_url = url + param;
			},
			// 选择申请原因
			choose_apply_reason() {
				let that = this;
				if(that.apply_type!='0') {
					let itemList = that.itemList;
					let apply_type = that.apply_type-1;
					uni.showActionSheet({
						itemList: itemList[apply_type],
						success: function (res) {
							let tapIndex = res.tapIndex;
							that.apply_reason = itemList[apply_type][tapIndex];
							that.options_data.apply_reason = that.apply_reason;
						},
						fail: function (res) {
						}
					});
				}else{
					hl.showToast('请选择申请类型', 1000);
				}
			},
			// 选择是否收货
			choose_shstate(state){
				this.shstate_let = state;
				this.options_data.shstate_let = state;
			},
			// 选择退货类型
			choose_apply_type(apply_type){
				if(apply_type != this.apply_type) {
					this.apply_reason = '请选择申请原因';
				}
				this.apply_type = apply_type;
				this.options_data.apply_type = apply_type;
			},
			// 修改收货地址
			edit_address(){
				this.build_url(this.options_data);
				uni.navigateTo({
					url: this.edit_address_url
				})
			},
			// 记录问题描述
			log_content(e){
				this.content = e.target.value;
				this.options_data.content = this.content;
			},
			// 提交申请
			submit_apply(){
				let data = {};
				data.order_id = this.order_id;
				data.content = this.content;
				data.address = JSON.stringify(this.addressData);
				data.shstate = this.shstate_let;
				data.apply_type = this.apply_type;
				data.apply_reason = this.apply_reason;
				data.imageList = this.getImageList('url');
				let that = this;
				that.bIsShowLoading = true;
				hl.post('order/submit_apply', data, true, function(res){
					that.bIsShowLoading = false;
					let resdata = res.data;
					hl.showToast(resdata.msg, 1000);
					if(resdata.code != '-1') {
						setTimeout(function(){
							uni.redirectTo({
								url: '/pages/jewel/order/refund_list'
							})
						}, 1000)
					}
				})
			},
			// 获取具体的图片列表
			getImageList: function (key){
				let imageList = this.imageList;
				let urls = [];
				for (let i in imageList) {
					urls = urls.concat(imageList[i][key]);
				}
				return urls;
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				let urls = this.getImageList('temp');
				uni.previewImage({
					current: current,
					urls: urls
				})
			}
		}
	}
</script>
<style>
page {
	background: #f4f4f7;
}
.bg_style {
	background: #fff;
	margin-bottom: 30rpx;
}
.font-color-hs {
	color: #999;
}
.good-box {
	height: auto;
	width: 100%;
	overflow: hidden;
	border-top: 1px solid #ddd;
}
.common {
	height: 124rpx;
	width: 100%;
	line-height: 124rpx;
}
.order-mer {
	height: 82rpx;
	line-height: 82rpx;
	border-bottom: 1px solid #ddd;
}
.com-name {
	float: left;
}
.content-box {
	width: 90%;
	height: 100%;
	margin: 0 auto;
	font-size: 24rpx;
	border-bottom: 1px solid #ddd;
}
.detail-com {
	height: 62rpx;
	overflow: hidden;
	color: #666;
}
.com-contact {
	float: right;
	color: #666;
}
.com-contact image {
	width: 39rpx;
	height: 39rpx;
	position: relative;
	top: 10rpx;
}
.good {
	height: 246rpx;
	width: 100%;
	overflow: hidden;
	margin-top: 30rpx;
	border-bottom: 1px solid #ddd;
}

.lease-img {
	float: left;
	width: 144rpx;
	height: 192rpx;
	border: 1rpx solid #c8c8c8;
	margin-right: 21rpx;
}
.lease-img image {
	width: 100%;
	height: 100%;
}
.lease-info {
	width: 368rpx;
	float: left;
	font-size: 26rpx;
}
.lease-title {
	height: 76rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.lease-attr {
	height: 68rpx;
	overflow: hidden;
	font-size: 24rpx;
	margin-top: 10rpx;
}
.lease-price {
	float: right;
	font-size: 26rpx;
}
.lease-num {
	margin-top: 14rpx;
}
.cust-select-box {
	height: 84rpx;
	line-height: 84rpx;
	font-size: 26rpx;
}
.cust-key {
	float: left;
	text-indent: 22rpx;
}
.cust-value-box {
	width: auto;
	height: 100%;
	overflow: hidden;
}
.cust-value {
	border: 1rpx solid #ccc;
	height: 50rpx;
	line-height: 50rpx;
	color: #666;
	font-size: 26rpx;
	border-radius: 5rpx;
	float: left;
	margin-left: 20rpx;
	margin-top: 16rpx;
	text-align: center;
	overflow: hidden;
	padding: 0 25rpx;
}
.cust-value-hours{
	border: 1rpx solid #bea374;
	color: #bea374;
}
.cust-content {
	border: 1rpx solid #ddd;
	border-radius: 5rpx;
	height: 90rpx;
	margin: 30rpx 0rpx;
	text-indent: 18rpx;
	background: #f5f5f5;
	width: 95%;
}
.cust_select_apply {
	padding-left: 30rpx;
}
.select_type {
	display: inline-block;
}
.op-icon {
	height: 50rpx;
	width: 50rpx;
	float: right;
	padding-top: 23rpx;
}
.placeholder {
	height: auto;
}
.placeholder .cust-key {
	margin-right: 20rpx;
	padding-top: 30rpx;
}
.addr:last {
	border-bottom: none !important;
}
.address {
	height: auto !important;
	overflow: hidden;
}
.address .select_type {
	display: block !important;
	text-align: left;
	width: 500rpx;
	float: left;
	text-indent: 0rpx;
	height: 100%;
	margin-left: 20rpx;
	line-height: 40rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}
.address .addr-text {
	line-height: 0;
	box-sizing: border-box;
	padding-top: 40rpx;
}
.addr {
	border-bottom: 1rpx solid #ddd;
	margin-bottom: 0rpx;
	clear: both;
}
.warning_text {
	font-size: 26rpx;
	text-align: center;
	margin-top: 10rpx;
	color: #bea374;
	margin-bottom: 20rpx;
}
.submit-box {
	text-align: center;
	padding-bottom: 40rpx;
}
.submit {
	background: #bea374;
	display: inline-block;
	border-radius: 0.15rem;
	width: 15rem;
	height: 78rpx;
	color: #fff;
	text-align: center;
	line-height: 78rpx;
	font-size: 28rpx;
	margin-top: 42rpx;
}
.addr-text {
	float: left;
}
.contact {
	background: none !important;
	font-size: 28rpx;
	position: relative;
	top: 8rpx;
	color: #666;
}
.contact::after {
	content: none;
}

.upload_img{
	height: 168rpx!important;
}
.upload_img .add-image{
	width: 123upx;
	height: 123upx;
	border: 1px solid #e6e6e6;
	border-radius: 5px;
	font-size: 100upx;
	color: #f2f2f2;
	font-weight: bold;
	text-align: center;
	line-height: 106upx;
	margin: 20rpx 0rpx 0rpx 20rpx;
	float: left;
}
.upload_img .images-content{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	position: relative;
	flex: 1;
	margin-left: 30upx;
	margin-top: 10upx;
}
.upload_img .image-file{
	width: 123upx;
	height: 123upx;
	margin-right: 10upx;
	margin-bottom: 10upx;
	position: relative;
	float: left;
	margin: 30rpx 0rpx 0rpx 20rpx;
}
.image-file image{
	width: 100%;
	height: 100%;
	float: left;
}
.close_diy{
	height: 35upx!important;
	width: 35upx!important;
	position: absolute;
	right: -5upx;
	top: -10upx;
	z-index: 9upx;
}
.back_address{
	line-height: 50rpx!important;
	height: 175rpx;
	color: #666;
}
.back_address .cust-key:first-child{
	margin-top: 10rpx;
	padding-bottom: 7rpx;
	border-bottom: 1upx solid #ddd;
	width: 100%;
	color: #000;
	font-size: 24rpx;
}
.back_address view{
	clear: both;
}
.youfei{
	color: #F32F2F;
}
</style>